<script setup lang="ts">
import Taro from "@tarojs/taro";
import ByText from "@/components/ui/ByText.vue";
import CouponEtime from "@/components/common/CouponEtime.vue";

import ApiUser from "@/api/user";
import useFetch from "@/hooks/useFetch";
import { computed } from "vue";

const { source, selection } = defineProps<{
  selection?: boolean;
  source?: any;
}>();

// 打开权益包
const { run } = useFetch(ApiUser.userTicketOpen, {
  immediate: false,
  showLoading: true,
  onSuccess() {
    Taro.navigateTo({ url: `/packageCoupon/pages/detail?sn=${source.sn}` });
  },
});

const handleClick = async () => {
  if (selection) return;

  if (source.status === 1) {
    // 未打卡
    const { confirm } = await Taro.showModal({
      title: "激活提示",
      content: "即将激活权益包，激活后不可转赠微信好友。未激活权益包可转赠",
    });

    if (confirm) run({ sn: source.sn });
  } else {
    navigateTo();
  }
};

const navigateTo = () => {
  const { status, sn, ticket_id } = source;
  Taro.navigateTo({
    url: `/packageCoupon/pages/${
      status == 2 ? "detail" : "info"
    }?sn=${sn}&ticket_id=${ticket_id}`,
  });
};

const getDateProps = computed(() => {
  const { act_info, etime_info } = source;
  const flag = etime_info.etime_type === 3;

  return {
    start: flag ? act_info.start_time : etime_info.start_time,
    end: flag ? act_info.end_time : etime_info.end_time,
  };
});
</script>

<template>
  <view class="relative flex bg-primary rounded-lg p-3" @tap="handleClick">
    <image
      class="flex-none mr-3 w-[250px] h-[188px] rounded-md"
      :src="source.act_info.title_img"
    />

    <view class="flex flex-col flex-auto min-w-0 text-dark">
      <view class="flex-auto">
        <ByText block :lineClamp="1">{{ source.act_info.title }}</ByText>
        <view class="text-lg mt-1 font-bold">
          {{ source.sku_info.pkg_info.package_title }}
        </view>

        <ByText block :lineClamp="2" class="text-sm">
          {{ source.sku_info.sku_title }}
        </ByText>
      </view>

      <ByText class="text-xs">
        <CouponEtime v-bind="getDateProps" />
      </ByText>
    </view>

    <view
      v-if="source.status == 2"
      class="absolute bottom-0 right-4 translate-y-1/2 bg-dark text-white px-3 py-1 text-sm rounded-full"
      >使用（{{ source.use_num }}/{{ source.total_num }}）
    </view>
  </view>
</template>
